*{
	padding: 0;margin: 0;
}
body{
	background-color: #fff;
	font-size: 14px;
}
.warp{
	width: 100%;
	height: 600px;
	position: absolute;
	top: 190%;
	margin-top: -300px;
	background-color: #333;
	overflow: hidden;
	/*设置子元素支持3D透视视图 设置子元素距本身试图的距离，如果设为0表示不支持透视*/
	-webkit-perspective:800px;
	-moz-perspective:800px;
}
/*海报样式*/
.photo{
	width: 260px;
	height: 320px;
	position: absolute;
	z-index: 1;
	/*transition:所有海报添加过度效果 
	ease-in-out：规定以慢速开始和结束的过渡效果  */
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	left:50%;
	top:50%;
	margin-left:-130px;
	margin-top:-160px;
}
/*海报正反面相同样式*/
.photo-wrap .side{
	width: 100%;
	height: 100%;
	/*background-color: #eee;*/
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	/*阴影效果*/
    box-shadow: 0 0 90px rgba(10,80,100,1);
	/*设置盒模型大小：它的内容和它padding都不会超过它的边框*/
	box-sizing:border-box;
}

.photo .side-front .image{
	width: 100%;
	height: 250px;
	line-height: 250px;
	overflow: hidden;
}
.photo .side-front .image img{
	width: 100%;
}
/*海报标题信息*/
.photo .side-front .caption{
	text-align: center;
	font-size: 16px;
	line-height:50px;
}
/*海报描述信息*/
.photo .side-back .desc{
	color: #666;
	font-size: 14px;
	line-height: 1.5em;
}

/*当前选中的海报样式*/
.photo_center{
	left: 50%;
	top:50%;
	margin:-160px 0 0 -130px;
	z-index: 999;
}
/*transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*/
/*负责旋转*/
.photo-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	/*让子元素（side-front、side-back）支持3D转换*/
	-webkit-transform-style:preserve-3d;/*兼容谷歌*/
	-moz-transform-style:preserve-3d;/*兼容火狐*/
	-ms-transform-style:preserve-3d;/*兼容IE*/

	/*transition 设置本身元素某个特效的动画过度*/
	/*第一个参数设置某一个样式的名称
	第二个参数设置动画效果持续时间
	第三个参数动画效果类型*/
	/*ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/
	-webkit-transition:all 0.6s ease;
	-moz-transition:all 0.6s ease;
	-ms-transition:all 0.6s ease;
} 
/*正面时*/
.photo-wrap .side-front{
	/*支持真实透视旋转效果*/
	 background-color: #eee;
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
}
/*反面时*/
.photo-wrap .side-back{
	/*在父级元素设置了-moz-transform-style:preserve-3d;会有很好的rotateY(180deg)旋转效果*/
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
}
.photo-wrap .side{
	/*当元素不面向屏幕时隐藏*/
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	/*当对象旋转90-180度的时候就会被影藏*/
}

/*控制按钮样式*/
.nav {
	width:80%;
	height:30px;
	line-height:30px;
	position:absolute;
	left:10%;
	right:10%;
	bottom:20px;
	z-index:999;
	text-align:center;
}
/*i普通样式*/
.nav .i {
	width:30px;
	height:30px;
	display:inline-block;
	cursor:pointer;
	background-color:#aaa;
	text-align:center;
	margin:0 1px;
	border-radius:50%;
	/*scale  2D缩放转换 */
	-webkit-transform:scale(0.48);
	-moz-transform:scale(0.48);
	-ms-transform:scale(0.48);

	/*transition:过渡,all全部,ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/
	transition:all .5s ease;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
}

/*选中按钮样式*/
.nav .i_current{
	/*scale  2D缩放转换 */
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	background:url(../img3/icon1.png) center center no-repeat #aaa;
}
/*背面按钮样式*/
.nav .i_back{
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	-ms-transform:rotateY(-180deg);
	background-color:#555;
	/*background:url(../images/icon2.png) center center no-repeat #555;*/
}
/*其中一张海报*/
.photo-wrap{
	/*origin 允许改变被转换元素的位置。*/
	-webkit-transform-origin:0% 50%;
	-moz-transform-origin:0% 50%;
	-ms-transform-origin:0% 50%;
}
/*正面时*/
.photo_front .photo-wrap{
	/*translate2D转换,在x轴平移,和 rotateY,在Y轴上旋转*/
	-webkit-transform:translate(0px,0px) rotateY(0deg);
	-moz-transform:translate(0px,0px) rotateY(0deg);
	-ms-transform:translate(0px,0px) rotateY(0deg);
}
/*反面时*/
.photo_back .photo-wrap{
	/*translate2D转换,在x轴平移260px,和 rotateY,在Y轴上旋转180deg*/
	-webkit-transform:translate(260px,0px) rotateY(180deg);
	-moz-transform:translate(260px,0px) rotateY(180deg);
	-ms-transform:translate(260px,0px) rotateY(180deg);
}
